/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-code-input {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	&__item {
		width: var(--pure-code-input-item-size, 2.75em);
		height: var(--pure-code-input-item-size, 2.75em);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-style: var(--pure-code-input-item-border-style, solid);
		border-color: var(--pure-code-input-item-border-color, var(--pure-border-color-default));
		border-top-width: var(--pure-code-input-item-border-top-width, 1px);
		border-bottom-width: var(--pure-code-input-item-border-bottom-width, 1px);
		border-left-width: var(--pure-code-input-item-border-left-width, 1px);
		border-right-width: var(--pure-code-input-item-border-right-width, 1px);
		border-radius: var(--pure-code-input-item-border-radius, var(--pure-radius-default));
		position: relative;
		box-shadow: var(--pure-code-input-item-box-shadow, 0 0 10px rgba(0, 0, 0, 0.1));

		&::before {
			content: "";
			position: absolute;
			width: var(--pure-code-input-cursor-width, 2px);
			height: var(--pure-code-input-cursor-height, 40%);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 0;
			border-radius: var(--pure-code-input-cursor-radius, var(--pure-radius-small));
			background: var(--pure-code-input-cursor-color, var(--pure-theme-primary));
			animation-name: animationPureCursorBlink;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			display: none;
		}
	}

	&__input {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		border: none;
		outline: none;
		background: transparent;

		&::before,
		&::after {
			opacity: 0;
			display: none;
		}
	}

	&--focus {
		.pure-code-input__item--active {
			&::before {
				display: block;
			}
		}
	}

	&--readonly {
		pointer-events: none;
		user-select: none;
	}
}
